<template>
  <div>
    <h1>我是登录页面</h1>
    <button @click="loginAsA">登录 as a</button>
    <button @click="loginAsAll">登录 as all</button>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore();
interface MenuType {
  path: string;
  name: string;
  parent: string;
  children?: Array<MenuType>;
}

const loginAsA = () => {
  // 设置全局的menu
  store.commit('setMenu', [
    { path: '/index', name: '首页' },
    { path: '/a', name: 'a页面' },
  ]);
  router.push('/index');
};

const loginAsAll = () => {
  const data: Array<MenuType> = [
    { path: '/index', name: '首页', parent: '' },
    { path: '/a', name: 'a页面', parent: '' },
    { path: '/b', name: 'b页面', parent: '' },
    { path: '/bm', name: '报名管理', parent: '' },
    { path: '/user', name: '用户管理', parent: '' },
    { path: '/aa', name: '用户列表', parent: '/user' },
    { path: '/bb', name: '添加用户', parent: '/user' },
  ];

  // 扁平化数据的 解构
  for (const item of data) {
    const { path } = item;
    const children = data.filter((it) => it.parent === path);
    if (children.length > 0) item.children = children;
  }
  const temarr = data.filter((item) => item.parent === '');
  console.log('temarr', temarr);

  // 设置全局的menu
  store.commit('setMenu', temarr);
  router.push('/index');
};
</script>
